<template>
   <h1>父组件收集到数据{{bl}}</h1>
    <!-- 
    双向绑定：
      1. 父组件把值传递给子组件
      2. 子组件修改数据的时候，父组件数据能更新
  -->
   <!-- 常用：v-model 语法糖实现双向绑定（一种简写方式） -->
   <Son2 v-model="bl"></Son2>
    <!-- 了解：简化前写法如下 -->
  <Son2 :modelValue="bl" @update:modelValue="modelValueFn"></Son2>
  <!-- 了解：简化前写法如下 -->
  <Son2 :modelValue="bl" @update:modelValue="bl = $event"></Son2>
</template>

<script>
import { ref } from 'vue'
import Son2 from './components/Son2.vue'
export default {
  name:'App',
  components:{Son2},

  setup(){
    const bl = ref(false)

      // PS：val 其实事件处理函数的事件对象，在模板中可通过 $event 获取到子组件传过来的数据
       const modelValueFn = val => {
      bl.value = val
    }
    return {bl,modelValueFn}
  }
}
</script>

<style>

</style>